<template>
  <q-dialog v-model="visible">
    <q-card style="max-height: calc(100vh - 2rem); max-width: 90vw">
      <q-card-section class="row items-center q-gutter-x-sm">
        <div class="text-h6">任务详情</div>
        <q-space/>
        <q-btn icon="delete" label="删除任务" color="negative" @click="remove"/>
        <q-btn icon="send" label="重新执行" color="primary" @click="execute"/>
      </q-card-section>
      <q-separator/>
      <div style="max-height: calc(100vh - 10rem); overflow: auto">
        <q-card-section class="row justify-center items-center q-gutter-sm">
          <q-list bordered>
            <q-item clickable v-ripple v-for="item in leftItem" v-bind:key="item.key">
              <q-item-section>
                <q-item-label>{{ item.label }}</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-item-label>{{ task[item.key] }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
          <q-list bordered>
            <q-item clickable v-ripple v-for="item in rightItem" v-bind:key="item.key">
              <q-item-section>
                <q-item-label>{{ item.label }}</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-item-label>{{ task[item.key] }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
          <q-input readonly rows="3" v-model="task.description" outlined type="textarea" label="任务描述"/>
        </q-card-section>
        <q-separator/>
        <q-table :rows="orderList"
                 :columns="columns"
                 class="sticky-header-table"
                 row-key="id">
          <template v-slot:body-cell="props">
            <q-td :props="props" @click="orderMessage.show(props.row)">
              {{props.value}}
            </q-td>
          </template>
        </q-table>
      </div>
    </q-card>
    <order-message ref="orderMessage"/>
  </q-dialog>
</template>

<script>
import { ref } from 'vue'
import { api } from 'boot/axios'
import { useQuasar } from 'quasar'
import { useAPIStore } from 'stores/api'

import OrderMessage from 'components/transport/orders/OrderMessage.vue'

const columns = [
  { label: '订单状态', name: 'status', field: 'status' },
  { label: '订单类型', name: 'type', field: 'type' },
  { label: '开始时间', name: 'startTime', field: 'startTime' },
  { label: '取货/料时间', name: 'pickTime', field: 'pickTime' },
  { label: '订单完成', name: 'arriveTime', field: 'arriveTime' }
]

const leftItem = [
  { label: '执行设备', key: 'device' },
  { label: '创建时间', key: 'createTime' }
]

const rightItem = [
  { label: '开始时间', key: 'startTime' },
  { label: '结束时间', key: 'endTime' }
]

export default {
  name: 'OrderDetailDialog',
  components: { OrderMessage },
  setup (props, context) {
    const $q = useQuasar()
    const task = ref({})
    const orderList = ref([])
    const visible = ref(false)

    function getOrderDetails (val) {
      api.get(useAPIStore().orderUrl + '/order/task/' + val).then(rs => {
        orderList.value = rs.data
      })
    }

    return {
      visible,
      task,
      orderList,
      columns,
      leftItem,
      rightItem,
      show (data) {
        task.value = data
        getOrderDetails(data.id)
        visible.value = true
      },
      remove () {
        $q.dialog({
          title: '删除任务',
          message: '是否要删除该配送任务？',
          cancel: true,
          persistent: true
        }).onOk(() => {
          api.delete(useAPIStore().orderUrl + 'task/' + task.value.id).then(rs => {
            $q.notify({ type: 'positive', message: '订单删除成功' })
            context.emit('refresh')
            visible.value = false
          })
        })
      },
      execute () {
        $q.dialog({
          title: '执行任务',
          message: '是否要立即执行该任务？',
          cancel: true,
          persistent: true
        }).onOk(() => {
          api.post(useAPIStore().centerUrl + 'center/send/' + task.value.device, { content: task.value.id, type: 'task' })
        })
      },
      orderMessage: ref()
    }
  }
}
</script>
